<template>
	<view>
		<!-- 轮播图 -->
		<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="200" style="width: 750rpx;height: 250rpx;">
			<swiper-item>
				<image src="/static/images/demo/banner/1.jpg" style="width: 750rpx;height: 250rpx;"></image>
			</swiper-item>
			<swiper-item>
				<image src="/static/images/demo/banner/2.jpg" style="width: 750rpx;height: 250rpx;"></image>
			</swiper-item>
		</swiper>
		<!-- 选项卡 -->
		<scroll-view scroll-x :scroll-into-view="scrollInto" scroll-with-animation class="scroll-row border-light-secondary" style="height: 100rpx;">
			<view v-for="(item,index) in tabBars" :key="index" class="scroll-row-item px-3 py-2 font-md" :id="'tab'+index"
			:class="tabIndex===index?'text-main font-lg font-weight-bold':''" @click="changeTab(index)">{{item.name}}</view>
		</scroll-view>
		
		<swiper :duration="150" :current="tabIndex" @change="onChangeTab" :style="'height:'+scrollH+'px;'">
			<swiper-item v-for="(item,index) in list" :key="index">
				<scroll-view :style="'height:'+scrollH+'px;'" @scrolltolower="loadmore(index)">
					<template v-if="item.list.length > 0">
						<view class="flex flex-wrap ml-3">
							<!-- 列表 -->
							<block v-for="(item2,index2) in item.list" :key="index2">
								<view class="flex flex-column list-item border rounded mr-2 mb-3">
									<image class="h-img rounded-top" :src="item2.userpic" mode="aspectFill"></image>
									<view class="px-1" style="width: 320rpx;height: 88rpx;">
										<view class="flex align-center pt-1 justify-between" style="height: 44rpx;">
											<text class="font-sm">{{item2.username}}</text>
											<view class="flex align-center px-2 rounded-circle bg-main">
												<text class="iconfont text-white font-sm">1</text>
												<text class="font-sm text-white">{{item2.age}}</text>
											</view>
										</view>
										<view class="flex align-end" style="height: 44rpx;">
											<text class="text-secondary font-sm">{{item2.summary}}</text>
										</view>
									</view>
								</view>
							</block>
						</view>
						<!-- 上拉加载 -->
						<load-more :loadmore="item.loadmore"></load-more>
					</template>
					<!-- 暂无数据 -->
					<template v-else>
						<view>
							<text>暂无数据</text>
						</view>
					</template>
				</scroll-view>
			</swiper-item>
		</swiper>
		
	</view>
</template>

<script>
	const demo = [{
		username: "天王盖地虎",
		userpic: "/static/images/demo/1.jpg",
		summary: "自我描述",
		sex: 0,
		age: 25
	},{
		username: "天王盖地虎2",
		userpic: "/static/images/demo/1.jpg",
		summary: "自我描述2",
		sex: 1,
		age: 25
	}];
	
	import loadMore from '@/components/commons/load-more.vue'
	export default {
		components: {
			loadMore
		},
		data() {
			return {
				// 列表高度
				scrollH:600,
				// 顶部选项卡
				scrollInto:"",
				tabIndex:0,
				tabBars: [{
					name: '最新',
				},{
					name: '附近',
				},{
					name: '新人',
				}],
				list:[]
			}
		},
		// 监听点击导航栏搜索框
		onNavigationBarSearchInputClicked() {
			uni.navigateTo({
				url: '../../commons/search/search?type=post',
			});
		},
		// 监听导航按钮点击事件
		onNavigationBarButtonTap() {
			uni.navigateTo({
				url: '../../commons/add-input/add-input',
			});
		},
		onLoad() {
			let res = uni.getSystemInfoSync()
			this.scrollH = res.windowHeight - uni.upx2px(101)
			
			this.getData()
		},
		methods: {
			// 获取数据
			getData() {
				var arr = []
				for(let i = 0; i < this.tabBars.length; i++) {
					// 生成列表模板
					let obj = {
						// 1.上拉加载更多  2.加载中... 3.没有更多了
						loadmore: "上拉加载更多",
						list: []
					}
					if(i < 2) {
						obj.list = demo
					}
					arr.push(obj)
				}
				this.list = arr
			},
			// 监听滑动
			onChangeTab(e) {
				this.changeTab(e.detail.current)
			},
			// 切换选项
			changeTab(index) {
				if(this.tabIndex === index) return;
				this.tabIndex = index
				// 滚动到指定元素
				this.scrollInto = 'tab'+index
			},
			// 上拉加载更多
			loadmore(index) {
				console.log('上拉刷新')
				// 拿到当前列表
				let item = this.list[index]
				// 判断是否处于可加载状态（上拉加载更多）
				if (item.loadmore !== '上拉加载更多') return;
				// 修改当前列表加载状态
				item.loadmore = '加载中...'
				// 模拟数据请求
				setTimeout(()=>{
					// 加载数据
					item.list = [...item.list,...item.list]
					// 恢复加载状态
					item.loadmore = '上拉加载更多'
				}, 5000)
			}
		}
	}
</script>

<style scoped>
	.list-item {
		width: 336rpx;
		height: 430rpx;
	}
	.h-img {
		width: 336rpx;
		height: 336rpx;
	}
</style>
